<template>
	<view>
		<view>
			 <view class="list" v-for="(item,index) of newsReviersVoTwo" :key="index">
				<ul>
				  <li class="one-row">
					<view>
					  <img
						class="tx"
						:src="item.customerHandImage"
					  >
					</view>
					<view class="one-row-bottom">
					  <p class="name">{{item.customerNickName}}</p>
					  <p style="color: rgba(151, 149, 149, 100);font-size: 12px;">{{item.localReviersTime}}</p>
					</view>
				  </li>
				  <li>
					<view class="titleText">
					  <p>{{item.localReviewsTitle}}/{{item.localReviewsText}}</p>
					</view>
				  </li>
				  <li>
					<view class="demo-contentImg" v-for="pic in item.pictureList">
					  <image style="width: 10rem;height: 10rem;" fit="cover" :src="pic.localPictureUrl" mode=""></image>
					</view>
				  </li>
				  <li>
					<view class="demo-primary">
					  <van-tag plain type="primary" style="padding: 0.15rem">石家庄同城</van-tag>
					  <van-tag plain type="primary" style="padding: 0.15rem">#设计图纸#</van-tag>
					</view>
				  </li>
				  <li>
					<view class="demo-contento" style="text-align: right;padding-top: 0.4rem">
					  <view class="demo-contento-chat" @click="huiFuSee(item.localReviewsId)">
						<van-icon name="chat-o" />
						<span class="demo-contento-chats" style="font-size: 0.8rem">{{item.localReviersReply}}</span>
					  </view>
					  <view class="demo-contento-like" @click="giveThumbsUp(item.localReviewsId,item.localFabulousStatus)">
						<van-icon :name="item.localFabulousStatus==1?name1:name"/>
						<span class="demo-contento-likes" style="font-size: 0.8rem">{{item.localReviersFabulous}}</span>
					  </view>
					</view>
				  </li>
				</ul>
			  </view>
			  
			  <!-- 自定义图标 -->
			  <van-popup v-model="show" closeable close-icon="close" round  position="bottom" :style="{ height: '60%' }">
			  	<view class="wrapper" >
			  	<view class="block">
			  		<view class="block-top">
			  			<p>全部评论{{replyVoList.length}}条</p>
			  		</view>
			  		<view class="block-list">
			  			<view class="block-list-demo" v-for="item in replyVoList" :key="item.localReplyId">
			  				<img src="https://img.yzcdn.cn/vant/logo.png">
			  				<view class="list-demo-content">
			  					<view>
			  						<h3>{{item.customerNickName}}</h3>
			  						<p>{{item.localReplyTime}}</p>
			  					</view>
			  					<p style="width: 70%;font-size: 0.7rem">{{item.localReplyText}}</p>
			  				</view>
			  				<view class="block-list-like">
			  					<van-icon name="like-o"/>
			  					<span class="block-list-likes" style="font-size: 0.8rem">{{item.localReplyFabulous}}</span>
			  				</view>
			  			</view>
			  		</view>
			  		<view class="block-bottom">
			  			<van-cell-group >
			  				<van-field
			  				v-model="localReplyText"
			  				type="textarea"
			  				autosize
			  				left-icon="edit"
			  				placeholder="评论一下~"
			  				center
			  				>
			  					<van-button slot="button" size="small" type="primary" @click="insertLocalReply">
			  					发布</van-button>
			  				</van-field>
			  			</van-cell-group>
			  		</view>
			  	</view>
			  	</view>
			  </van-popup>
			  
		</view>
	</view>
</template>

<script>
	  import {Toast} from "vant";
	  import {
	    selectNewsReviersVoTwo,
	    selectReplyVoByRevierwsId,
	    addLocalReply,
	    localFabulousJian,
	    localFabulousJia1,
	    localFabulousJia,
	  } from '../../api/customer/local.js';
	 export default {
	    data () {
	      return {
	        name: 'like-o',
	        name1: 'like',
	        //点赞过的消息集合
	        newsReviersVoTwo:[
			],
	        //发布信息的id
	        localReviersId:'',
	        //回复的框
	        show:false,
	        //回复的列表
	        replyVoList:[
			],
	        //评论的内容
	        localReplyText:'',
	        //点赞中间表数据参数
	        localFabulous:{
	          localReviersId:'',
	          localFabulousStatus:'',
	        },
	
	      }
	    },
	    //页面渲染前自动加载
	    created(){
	      this.getSelectNewsReviersVoTwo();
	    },
	    //方法
	    methods: {
	      //点赞过的数据
	      getSelectNewsReviersVoTwo(){
	        selectNewsReviersVoTwo().then((res)=>{
	          this.newsReviersVoTwo = res.data.data;
	        })
	      },
	      //查看发布信息回复
	      huiFuSee(localReviewsId){
	        this.localReviersId = localReviewsId;
	        this.show = true;
	        selectReplyVoByRevierwsId(localReviewsId).then((res)=>{
	          this.replyVoList = res.data.data;
	          console.log(JSON.stringify(res));
	        })
	      },
	      // 发表评论
	      insertLocalReply(){
	        addLocalReply(this.localReviersId,this.localReplyText).then((res) =>{
	          console.log(JSON.stringify(res));
	          if(res.code == 500){
	            Toast("评论失败");
	          }else{
	            Toast("评论成功");
	            this.huiFuSee(this.localReviersId);
	            this.localReplyText = '';
	          }
	        })
	      },
	      // 点赞
	      giveThumbsUp(localReviewsId,localFabulousStatus){
	        this.localFabulous.localReviersId = localReviewsId;
	        console.log(localReviewsId,localFabulousStatus)
	        switch (localFabulousStatus) {
	          case 1:
	            this.localFabulous.localFabulousStatus = 0;
	            localFabulousJian(this.localFabulous).then((res)=>{
	              if (res.data.code==200){
	                this.getSelectNewsReviersVoTwo();
	              }
	               console.log(JSON.stringify(res));
	            })
	            break
	          case 0:
	            this.localFabulous.localFabulousStatus = 1;
	            localFabulousJia1(this.localFabulous).then((res)=>{
	              if (res.data.code==200){
	                this.getSelectNewsReviersVoTwo();
	              }
	             console.log(JSON.stringify(res));
	            })
	            break
	          default:
	            this.localFabulous.localFabulousStatus = 1;
	            localFabulousJia(this.localFabulous).then((res)=>{
	              if (res.data.code==200){
	                this.getSelectNewsReviersVoTwo();
	              }
	             console.log(JSON.stringify(res));
	            })
	            break;
	        }
	      },
	
	
	    },
	
	  }
</script>

<style>
	 .four-left img {
	    width: 24vw;
	    height: 24vw;
	  }
	
	  .three-row img {
	    margin-top: 3%;
	  }
	
	  .three-row img {
	    width: 24vw;
	  }
	
	  p {
	    display: -webkit-box;
	    /*-webkit-box-orient: vertical;*/
	    /*-webkit-line-clamp: 2;*/
	    overflow: hidden;
	  }
	
	
	  .one-row-bottom {
	    margin-left: 8px;
	  }
	
	  .list {
	    width: 100%;
	    overflow: hidden;
	    padding: 10px 15px;
	    box-sizing: border-box;
	    background-color: #ffffff;
	    margin: 10px 0;
	  }
	
	  .tx {
	    width: 10vw;
	    height: 10vw;
	    border-radius: 50%;
	  }
	
	  .one-row {
	    display: flex;
	  }
	
	  .name {
	    color: rgba(104, 104, 103, 100);
	    font-size: 14px;
	    text-align: left;
	    font-family: PingFangSC-regular;
	  }
	  .demo-contentImg{
	    display: inline-block;
	    margin: 0.1rem;
	  }
	  .titleText{
	    text-align: left;
	  }
	  .demo-primary{
	    float: left;
	    padding: 0.5rem 0;
	  }
	  .demo-contento .demo-contento-chat{
	    margin-top: 25px;
	    display: inline-block;
	    margin-right: 0.4rem;
	  }
	  .demo-contento .demo-contento-like{
	    display: inline-block;
	  }
	
	
	.wrapper {
		    display: flex;
		    align-items: center;
		    justify-content:center;
		    height: 100%;
		    position: relative;
		    margin-bottom: 50px ;
		  }
		  .block {
		    width: 100%;
			height: 100%;
		    background-color: #fff;
		    bottom: 0;
		    position: absolute;
		    padding: 1rem 1rem 3.125rem 1rem;
		    overflow: auto;
		  }
		  .block .block-top{
		    padding-left: 1rem;
		    font-weight: 700;
		  }
		
		 .block-bottom{
			  width: 90%;
			  position: fixed;
			  z-index: 100;
			  bottom: 0rem;
			  background-color: #fff;
		  }
		
		  .block .block-list{
			padding-left:1rem;
			padding-top:1rem;
			font-size: 0.5rem;
			
		  }
		
		  .block .block-list .block-list-demo{
		    padding: 1rem 0;
		    position: relative;
		  }
		
		  .block .block-list .block-list-demo .block-list-demos{
		    margin-top: 0.5rem;
		    margin-left: 2.5rem;
		  }
		  .block .block-list .block-list-demo .block-list-demos .block-list-ademos{
		    padding-top: 0.5rem;
		  }
		  .block .block-list .block-list-demo .block-list-demos img{
		    width: 1rem;
		    height: 1rem;
		  }
		
		  .block .block-list .block-list-demo img{
		    flex-shrink: 0;
		    width: 2rem;
		    height: 2rem;
		    float: left;
		    margin: 0;
		  }
		  .block .block-list .list-demo-content{
		    margin-left: 0.5rem;
		    width: 70%;
		    display: inline-block;
		  }
		  .block .block-list .list-demo-content div{
		    padding-bottom: 0.5rem;
		  }
		  .block .block-list .list-demo-content div h3{
		    font-size: 0.75rem;
		  }
		  .block .block-list .list-demo-content div p{
		    font-size: 0.5rem;
		  }
		  .block .block-list .block-list-like{
		    display: inline-block;
		  }
		  .demo-contentImg{
		    display: inline-block;
		    margin: 0.07rem;
		  }
</style>
